<template>
  <div id="app">
    <!-- 条件渲染 Header -->
    <Header v-if="!hideHeader" />

    <!-- 主体内容 -->
    <div v-if="!hideHeader" class="container">
      <div class="main-content">
        <router-view />
      </div>
    </div>

    <!-- 登录页面只显示登录内容 -->
    <router-view v-if="hideHeader" />

    <!-- 条件渲染 Footer -->
    <Footer v-if="!hideFooter" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import Header from './components/Header.vue';
import Footer from './components/footer.vue'; // 引入 Footer 组件

// 根据当前路由的 meta 信息判断是否隐藏 Header
const route = useRoute();
const hideHeader = computed(() => route.meta.hideHeader || false);

// 根据当前路由的 meta 信息判断是否隐藏 Footer
const hideFooter = computed(() => route.meta.hideFooter || false);
</script>

<style scoped>
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: #f9f9f9;
  overflow-y: auto;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

footer {
  margin-top: auto; /* 保证 footer 始终显示在页面底部 */
  background-color: #2c2f36;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}
</style>
